<template>
    <div class="callback-container">
        <div class="callback-content">
            <el-card class="callback-card">
                <template #header>
                    <div class="card-header">
                        <h2>GitHub 授权登录</h2>
                    </div>
                </template>
                <div class="callback-status">
                    <div v-if="loading" class="loading-status">
                        <el-icon class="loading-icon">
                            <Loading />
                        </el-icon>
                        <p>正在处理授权登录...</p>
                    </div>
                    <div v-if="error" class="error-status">
                        <el-icon class="error-icon">
                            <CircleClose />
                        </el-icon>
                        <p>{{ errorMessage }}</p>
                        <el-button type="primary" @click="returnToLogin">返回登录页</el-button>
                    </div>
                </div>
            </el-card>
        </div>
    </div>
</template>

<script lang="ts" setup>
import { ref, onMounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
import { Loading, CircleClose } from '@element-plus/icons-vue'
import apiClient from '@/api/api'
import store from '@/store'

const route = useRoute()
const router = useRouter()

const loading = ref(true)
const error = ref(false)
const errorMessage = ref('')

const handleCallback = async () => {
    const code = route.query.code as string
    const state = route.query.state as string
    if (!code) {
        error.value = true
        errorMessage.value = '授权参数无效'
        loading.value = false
        return
    }

    try {
        const response = await apiClient.get('http://localhost:8091/oauth/callbackGithub', {
            params: {
                code,
                state
            }
        })

        if (response.data.status === 0) {
            // 登录成功
            ElMessage({
                message: 'GitHub login successful!',
                type: 'success'
            })

            // 保存token
            localStorage.setItem('token', response.data.data)

            // 更新登录状态
            store.commit('setLoginStatus', true)

            // 跳转到首页
            router.push('/home')
        } else {
            ElMessage({
                message: response.data.message || 'GitHub login failed',
                type: 'error'
            })
            returnToLogin()
        }
    } catch (error: any) {
        console.error('GitHub login error:', error)
        ElMessage({
            message: error.message || 'GitHub login failed. Please try again.',
            type: 'error'
        })
        returnToLogin()
    }finally {
        loading.value = false
    }
}

const returnToLogin = () => {
    router.push('/login')
}

onMounted(() => {
    handleCallback()
})
</script>

<style scoped>
.callback-container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 90vh;
}

.callback-content {
    width: 100%;
    max-width: 500px;
    padding: 20px;
}

.callback-card {
    border-radius: 8px;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.card-header {
    display: flex;
    justify-content: center;
    align-items: center;
}

.card-header h2 {
    margin: 0;
    color: #303133;
}

.callback-status {
    padding: 30px 0;
    text-align: center;
}

.loading-status,
.error-status {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
}

.loading-icon {
    font-size: 48px;
    color: #409eff;
    animation: rotate 2s linear infinite;
}

.error-icon {
    font-size: 48px;
    color: #f56c6c;
}

@keyframes rotate {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}
</style>